<template>
	<view class="cardStyleWp">
		<view class="authStatusWp redCode" v-if="userInfo.authStatus==2">
			<view class="mark " style="color:red;">
				未通过企业认证
			</view>
		</view>

		<view class="top u-flex">
			<view class="left u-flex">
				<view>
					<u--image v-if="userInfo.head" :src="userInfo.head" mode="" width="96rpx" height="96rpx"></u--image>
					<u--image v-else src="https://file.casugn.com/storecompcard/temp/avatar_1683680677336.png"
						width="96rpx" height="96rpx"></u--image>
				</view>
				<view class="nameWp ">
					<view class="name u-line-1">
						{{userInfo.name?userInfo.name:'姓名'}}
					</view>
					<view class="title ">
						{{userInfo.position?userInfo.position:'职位'}}
					</view>
				</view>
			</view>
		</view>
		<view class="middle">
			<view class="left">
				<img src="https://file.casugn.com/storecompcard//ljxzIrdSkz8udb378b6ca7010c03d4c180358995ce20_1665382423718.png"
					alt="">
				<view class="company u-line-1">
					{{userInfo.company?userInfo.company:'公司名称'}}
				</view>
			</view>
			<view class="right">
				<img src="https://file.casugn.com/storecompcard//rChKiE3ZNa0U08ca98b18541d1f1f31bfe4055793bae_1665382444002.png"
					alt="">
			</view>
		</view>
		<view class="bottom">
			<view class="infoItem">
				<u--image src="https://file.casugn.com/storecompcard/temp/general／phone@2x(1)_1681184151521.png"
					alt="" width="32rpx" height="32rpx"></u--image>
				<view class="text">
					{{userInfo.mobile?userInfo.mobile:'手机'}} {{userInfo.wechat?`/ ${userInfo.wechat}`:''}}
				</view>
			</view>
			<view class="infoItem">
				<u--image src="https://file.casugn.com/storecompcard/temp/general／email@2x(1)_1681184368772.png"
					alt="" width="32rpx" height="32rpx"></u--image>
				<view class="text">
					{{userInfo.mail?userInfo.mail:'邮箱'}}
				</view>
			</view>
			<view class="infoItem">
				<u--image src="https://file.casugn.com/storecompcard/temp/general／location@2x(1)_1681184390942.png"
					alt="" width="32rpx" height="32rpx"></u--image>
				<view class="text">
					{{userInfo.address?userInfo.address:'联系地址'}}
				</view>
			</view>
		</view>
		<view class="reviewMark reviewMarkDark" hover-class="reviewMarkHover" @click="goToPreviewMyPage"
			v-if="showReviewMark">
			预览
		</view>

	</view>
</template>

<script>
	export default {
		name: "cardStyle",
		data() {
			return {};
		},
		props: {
			userInfo: {
				type: Object,
				default: () => {},
				required: true
			},
			showReviewMark: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			goToPreviewMyPage() {
				this.$emit('goToPreviewMyPage')
			}
		}
	}
</script>
<style lang="scss" scoped>
	.redCode {
		right: 51rpx !important;
		top: 2rpx !important;
	}

	.cardStyleWp {
		margin: 0 auto;
		position: relative;
		overflow: hidden;
		width: 686rpx;
		height: 412rpx;
		border-radius: 16rpx;
		box-shadow: 2px 2px 5px 0px rgba(104, 99, 254, 0.2);
		z-index: 2;
		background-color: #fff;

		.reviewMark {
			position: absolute;
			right: 10upx;
			top: 10upx;
			font-size: 24rpx;
			padding: 24rpx 24rpx 24rpx 0;
			color: #C9CDD4;
		}

		.reviewMarkHover {
			color: #eee;
		}

		.reviewMarkDark {
			color: #adb0b6 !important;
		}

		.top {
			height: 160upx;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;

			.left {
				margin-top: 30rpx;
				margin-left: 30rpx;
				display: flex;



				.nameWp {
					max-width: 500rpx;
					margin-left: 20upx;
					display: flex;
					align-items: center;

					.name {
						max-width: 250rpx;
						font-size: 40upx;
						font-weight: 600;
						color: #1D2129;
					}

					.title {
						align-self: flex-end;
						margin-left: 40upx;
						font-size: 22upx;
						font-weight: 400;
						color: #1D2129;
						margin-bottom: 20rpx;
					}
				}


			}

			.right {
				margin-top: 40upx;
				margin-right: 40upx;

			}
		}

		.middle {
			display: flex;
			height: 36upx;
			align-items: flex-end;
			margin-top: 30upx;

			.left {
				width: 580upx;
				height: 80upx;
				position: relative;

				img {
					width: 580upx;
					height: 80upx;
				}

				.company {
					position: absolute;
					top: 25upx;
					left: 35upx;
					color: white;
					font-size: 30upx;
					letter-spacing: 4upx;
				}
			}

			.right {
				position: relative;
				left: -10upx;
				width: 100upx;
				height: 140upx;

				img {
					width: 200upx;
					height: 140upx;
				}
			}

		}

		.bottom {
			margin-top: 25upx;
			padding-bottom: 30upx;
			margin-left: 30upx;

			.infoItem {
				display: flex;
				margin-bottom: 16rpx;

				.imgs {
					width: 32rpx;
					height: 32rpx;
				}

				.text {
					margin-left: 16rpx;
					max-width: 600rpx;
					font-size: 24rpx;
				}


			}

		}

		//企业认证标识
		.authStatusWp {
			position: absolute;
			right: 38upx;
			top: 5upx;
			height: 30upx;
			width: 130upx;
			text-align: center;
			font-size: 18upx;

			.mark {
				color: #6863fe;
			}

		}

		.roleIdentifyWp {
			position: absolute;
			right: 6upx;
			top: 0upx;
			overflow: hidden;
			text-align: center;
			font-size: 20upx;
			transform: rotate(-33deg);
			width: 30upx;

			.mark {
				color: #6863fe !important;
			}

			.isSuper {
				// background-color: #FD4C00 !important;
				color: #FD4C00 !important;
			}
		}

	}
</style>